<template>
    <div>
        <breadcrumb :title="'应用管理'" :noBack="true"></breadcrumb>
        <div class="white-block box" v-loading="loading">
            <div class="text-right">
                <el-button type="primary" size="small" @click="$router.push($route.path+'/add')">新增应用</el-button>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false" class="mr10"
                             @click="$router.push($route.path+'/'+scope.row.id)">编辑
                    </el-link>
                    <el-link type="primary" :underline="false" class="mr10" @click="remove(scope.row.id)">删除</el-link>
                    <el-link type="primary" :underline="false" v-if="scope.row.state==1"
                             @click="upAndDown(2,scope.row)">下架
                    </el-link>
                    <el-link type="primary" :underline="false" v-else-if="scope.row.state==2"
                             @click="upAndDown(1,scope.row)">上架
                    </el-link>
                </template>
                <template slot="state" slot-scope="scope">
                    <span v-if="scope.row.state==1">上架</span>
                    <span v-else-if="scope.row.state==2" class="error">下架</span>
                </template>
                <template slot="type" slot-scope="scope">
                    <span v-if="scope.row.type==1">工具</span>
                    <span v-else-if="scope.row.type==2">服务</span>
                    <span v-else>平台</span>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page" @jumpPage="getList"></page>

        </div>
        <transition name="slide">
            <router-view @upload="getList"></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {

        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '应用名称',
                        minWidth: '17%',
                        align: 'center'
                    },
                    {
                        prop: 'type',
                        label: '应用类型',
                        minWidth: '17%',
                        align: 'center'
                    },
                    {
                        prop: 'resSource',
                        label: '应用来源',
                        minWidth: '17%',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '17%',
                        align: 'center'
                    }
                ],
                slotColumns: ['operation', 'state', 'type'],
                data: {},
                loading: false,
                index: 1
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/admin/workbench/pageRes', {
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            },
            upAndDown(type, row) {
                let url = ''
                if (type === 1) {
                    url = '/admin/workbench/putOnRes'
                } else if (type === 2) {
                    url = '/admin/workbench/putOffRes'
                }
                this.loading = true
                this.$http.post(url, {
                    id: row.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        row.state = type
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            remove(id) {
                this.loading = true
                this.$http.post('/admin/workbench/removeRes', {
                    id: id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.getList()
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page
        }
    }
</script>

<style scoped lang="less">
</style>
